<template>
  <div class="detail-params" v-if="goodParams">
    <table class="params">
      <tbody>
        <tr v-for="(item, index) in goodParams.table[0]" :key="index">
          <td v-for="(i, count) in item" :key="count">
            {{i}}
          </td>
        </tr>
      </tbody>
    </table>

    <table class="params meterial">
      <tbody>
        <tr v-for="(item, index) in goodParams.set" :key="index">
          <td v-for="(i, d) in item" :key="d">{{i}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'DetailParams',
  props: {
    goodParams: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  computed: {
  }
}
</script>

<style scoped>
  .detail-params{
    padding: 30px 15px 0;
    color: rgba(41, 41, 41, 1);
    padding-bottom: 30px;
    border-bottom: 10px solid rgba(212, 208, 208, .3);
  }

  /* 衣服尺码 */
  .params{
    width: 100%;
    border-collapse: collapse;
    text-align: center;
  }
  .params tr{
    height: 45px;
    width: 100%;
  }
  .params tr:nth-last-of-type(1){
    border-bottom: 3px solid rgba(212, 208, 208, .8);
  }
  .params tr td{
    border-bottom: 1px solid rgba(240, 240, 240, 1);
  }
  .params tr td:nth-of-type(1){
    font-size: 18px;
    
  }

  /* 衣服材料、风格。。。 */
  .meterial tr:last-of-type{
    border-bottom: 1px solid rgba(240, 240, 240, 1);
  }
  .meterial tr td:nth-of-type(1){
    width: 50px;
  }
  .meterial tr td:nth-last-of-type(1){
    color: var(--color-tint);
    padding-left: 70px;
    text-align: left !important;
  }
</style>